<%--
  Created by IntelliJ IDEA.
  User: dd
  Date: 2023/4/27
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>试题管理</title>
    <script type="application/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css" >
  <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
  <style>
    body{padding: 6px 16px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
    <script type="text/html" id="barDemo">
        <a lay-event="edit" class="layui-btn layui-btn-xs">编辑</a>

        <a lay-event="del" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getInsert">新增</button>
        </div>
    </script>
</head>
<body>
<form class="layui-form" action="layui">
    <div class="layui-inline">
        <label class="layui-form-label">题目</label>
        <div class="layui-input-inline">
            <input type="text" name="sdssub" placeholder="请输入题目" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<table id="demo" class="demo-carousel" lay-filter="test" ></table>

<form class="layui-form" action="" id="updateTestForm" style="display: none" lay-filter="updateTestFormFilter">
    <input type="hidden" name="id">
    <input type="hidden" name="op1">
    <input type="hidden" name="op2">
    <input type="hidden" name="op3">
    <input type="hidden" name="op4">
    <div class="layui-form-item">
        <label class="layui-form-label">题号</label>
        <div class="layui-input-block">
            <input type="text" name="sdsno" required lay-verify="required|sdsnoExist" placeholder="请题目内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">题目</label>
        <div class="layui-input-block">
            <input type="text" name="sdssub" required lay-verify="required" placeholder="请题目内容" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formUpdateTest">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
  layui.use(['table','form'], function(){
    var table = layui.table;
      let form = layui.form;
    table.render({
      elem: '#demo'
      ,url: '${pageContext.request.contextPath}/TSdsSubServlet?method=query' //数据接口
      ,page: true //开启分页
      ,limit:10
      ,toolbar:'#toolbarDemo'
      // ,autoSort:false
      ,limits:[5,10,15,20,25,30,100,200]
      ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left',id: 'test'},
        {field: 'id',  width:'5%',title: 'ID', sort: true, fixed: 'left' }
            ,{field: 'sdsno',  width:'5%',title: '题号' }
        ,{field: 'sdssub',width:'20%', title: '题目'}
            ,{field: 'op1',width:'8%', title: '选项1'}
            ,{field: 'op2',width:'8%', title: '选项2'}
            ,{field: 'op3',width:'8%', title: '选项3'}
            ,{field: 'op4',width:'8%', title: '选项4'}
            ,{field: 'right', title: '操作',toolbar:'#barDemo'}
      ]]
    });
      form.on('submit(formDemo)',function (data) {
          table.reload('demo', {
              url: '${pageContext.request.contextPath}/TSdsSubServlet',
              where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                  sdssub: data.field.sdssub //排序字段
              }
          });
          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      })

      table.on('toolbar(test)', function(obj) {
          var checkStatus = table.checkStatus('test')
              , data = checkStatus.data; //获取选中的数据
          form.verify({
              //将用户名是否可用作为验证条件 表单提交时触发
              sdsnoExist:function(value){
                  var params = {'sdsno': value};
                  var message;
                  $.ajax({
                      url: "${pageContext.request.contextPath}/TSdsSubServlet?method=check",
                      // contentType: "application/json",
                      // dataType:'json',
                      type: "post",
                      async: false,
                      // data: JSON.stringify(params),
                      data: params,
                      success: function(d){
                          if(+d.code===1){
                              message ="题号已存在，请重新输入！"
                          }else{

                          }
                      },

                  });
                  if (message!=null) {
                      return '题号已存在';
                  }

              }
          });
          switch(obj.event){
              case 'getInsert':
                  layer.open({
                      title: '添加题目',
                      type: 1,
                      content: $('#updateTestForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它0的相对元素所影响
                      area: ['500px', '300px']
                  });
                  form.val('updateTestFormFilter', {sdsno:"",sdssub:"",op1:"很少",op2:"有时",op3:"经常",op4:"持续"});
//弹出对话框，添加用户的form表单
//监听form提交事件
                  form.on('submit(formUpdateTest)', function(index){
//ajax方式提交表单数据，将数据保存至数据库中
                      $.get(
                          "${pageContext.request.contextPath}/TSdsSubServlet?method=add"
                          , index.field
                          ,function (d){
                              if (+d.code===0){
                                  layer.closeAll();
                              }else {
                                  layer.closeAll();
                                  layer.confirm('存在相同题目无法添加', function(){layer.closeAll();})
                              }
                          }
                          ,"json"
                      )
                      layer.close(index);
                      table.reload('demo');
                      // table.reload('demo');
                      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                  });
                  break;
          }

      });

      //监听行工具事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，id 是 table 原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
          if(obj.event === 'del'){
              layer.confirm('是否执行？', function(index){
                  console.log(obj);
                  obj.del();
                  <%--$.get(--%>
                  <%--    "${pageContext.request.contextPath}/TSdsSubServlet?method=del"--%>
                  <%--    , data--%>
                  <%--    ,function (d){--%>
                  <%--        if (+d.code===0){--%>
                  <%--            layer.confirm('删除成功')--%>
                  <%--            table.reload('test');--%>
                  <%--        }else {--%>
                  <%--            layer.confirm('删除失败')--%>
                  <%--        }--%>
                  <%--    }--%>
                  <%--    ,"json"--%>
                  <%--)--%>
                  layer.closeAll();
                  table.reload('demo');
              });

          } else if(obj.event === 'edit'){
              layer.open({
                  title: '修改题目',
                  offset:'50px',
                  type: 1,
                  content: $('#updateTestForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                  area: ['500px', '300px']
              });
//表单数据的填充
              form.val('updateTestFormFilter', data);
//弹出对话框，添加用户的form表单
//监听form提交事件
              form.on('submit(formUpdateTest)', function(index){
//ajax方式提交表单数据，将数据保存至数据库中
                  $.get(
                      "${pageContext.request.contextPath}/TSdsSubServlet?method=upd"
                      , index.field
                      ,function (d){
                          if (+d.code===0){
                              table.reload('test');
                          }
                      }
                      ,"json"
                  )
                  layer.close(index);
                  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
              });

          }
      });
  })
</script>
</body>
</html>
